import { PageContainer, ProCard, StatisticCard } from '@ant-design/pro-components';
import React, {useEffect,} from 'react';
import RcResizeObserver from 'rc-resize-observer';
import { useState } from 'react';
import { Timeline } from 'antd';
import { Carousel } from 'antd';
import {getAllCountUsingPOST} from "@/services/datafa-backend/allController";

const imgStyle = {
  display: 'block',
  width: 42,
  height: 42,
};

const Welcome: React.FC = () => {

  const [responsive, setResponsive] = useState(false);
  const [bilibiliCount, setBilibiliCount] = useState<any>();
  const [douyinCount, setDouyinCount] = useState<any>();
  const [kuaishouCount, setKuaishouCount] = useState<any>();

  const loadData = async () => {
    const res: API.BaseResponseAllCountVO_ = await getAllCountUsingPOST();
    if (res.code === 0) {
      setBilibiliCount( res.data?.bilibiliCount);
      setDouyinCount(res.data?.douinCount);
      setKuaishouCount(res.data?.kuaishouCount);
    }
  }

  useEffect(() => {
    loadData();
  }, [])

  // @ts-ignore
  return (
    <PageContainer>
      <ProCard direction="column" ghost gutter={[0, 8]}>
        <RcResizeObserver
          key="resize-observer"
          onResize={(offset) => {
            setResponsive(offset.width < 596);
          }}
        >
          <StatisticCard.Group direction={responsive ? 'column' : 'row'}>
            <StatisticCard
              statistic={{
                title: '哔哩哔哩数据',
                value: bilibiliCount,
                icon: (
                  <img
                    style={imgStyle}
                    src="https://img2.baidu.com/it/u=2684122930,3194943425&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
                    alt="icon"
                  />
                ),
              }}
            />
            <StatisticCard
              statistic={{
                title: '抖音数据',
                value: douyinCount,
                icon: (
                  <img
                    style={imgStyle}
                    src="https://5b0988e595225.cdn.sohucs.com/images/20190321/31b8dc5335254e9490f74cd413bdd7d8.jpeg"
                    alt="icon"
                  />
                ),
              }}
            />
            <StatisticCard
              statistic={{
                title: '快手数据',
                value: kuaishouCount,
                icon: (
                  <img
                    style={imgStyle}
                    src="https://img2.baidu.com/it/u=831610716,1023455335&fm=253&fmt=auto&app=138&f=PNG?w=500&h=500"
                    alt="icon"
                  />
                ),
              }}
            />
            {/*<StatisticCard*/}
            {/*  statistic={{*/}
            {/*    title: '浏览量',*/}
            {/*    value: 17,*/}
            {/*    icon: (*/}
            {/*      <img*/}
            {/*        style={imgStyle}*/}
            {/*        src="https://gw.alipayobjects.com/mdn/rms_7bc6d8/afts/img/A*pUkAQpefcx8AAAAAAAAAAABkARQnAQ"*/}
            {/*        alt="icon"*/}
            {/*      />*/}
            {/*    ),*/}
            {/*  }}*/}
            {/*/>*/}
          </StatisticCard.Group>
        </RcResizeObserver>
      </ProCard>
      <ProCard >
        <ProCard colSpan={"70%"} style={{ marginBlockStart: 8 }} gutter={8} ghost>
          <ProCard bordered>
            <Carousel autoplay={true}>
                <img height={"260px"}  src={"https://12138-1309783343.cos.ap-nanjing.myqcloud.com/dpImages/2023/02/logo1.png"}/>
                <img height={"260px"} src={"https://pic1.zhimg.com/v2-3afef49c90c619e3b43f099f1956da6c_720w.jpg?source=172ae18b"}/>
                <img height={"260px"} src={"https://12138-1309783343.cos.ap-nanjing.myqcloud.com/dpImages/douyinlogo.jpg"}/>
                <img height={"260px"} src={"https://soft.jiegeng.com/uploadfile/2019/0919/20190919123751801.jpg"}/>
            </Carousel>
          </ProCard>
          <ProCard title={"更新公告"} colSpan="30%" bordered>
            <Timeline>
              <Timeline.Item>2023-4-24:推荐页面完成</Timeline.Item>
              <Timeline.Item>2023-4-23:欢迎页面,测试上线</Timeline.Item>
              <Timeline.Item>2023-4-22:全部列表展示</Timeline.Item>
              <Timeline.Item>2023-4-20:bilibili列表展示</Timeline.Item>
              <Timeline.Item>2023-4-15:项目开始</Timeline.Item>
            </Timeline>
          </ProCard>
        </ProCard>

      </ProCard>
    </PageContainer>
  );
};
export default Welcome;
